<template>
  <div class="resource-index maxW">
    <!-- 单级 联动选择-->
    <template v-if="!isMulti">
      <singleCascader
        @resChosed="resChosed"
        ref="singleCascader"
      ></singleCascader>
    </template>
    <!-- 多级 联动选择 -->
    <template v-else>
      <multiCascader
        type="resource"
        @resChosed="resChosed"
      ></multiCascader>
    </template>
    <div class="resource-content">
      <div class="filter-nav">
        <template>
          <el-radio-group v-model="orderby">
            <el-radio label="create_time">
              时间
              <i class="el-icon-sort-down"></i>
            </el-radio>
            <el-radio label="downloads">
              下载
              <i class="el-icon-sort-down"></i>
            </el-radio>
            <el-radio label="favs">
              收藏
              <i class="el-icon-sort-down"></i>
            </el-radio>
          </el-radio-group>
        </template>
      </div>
      <div class="resources-container clear">
        <div class="resource-card-box fl">
          <div class="cards-box">
            <resourceRow :opctions="resourceListData"></resourceRow>
            <div class="pageBox">
              <el-pagination
                v-if="total_number > page_size"
                @current-change="change_page"
                :page-size="page_size"
                :current-page="page_index"
                layout="total,prev, pager, next,jumper"
                :total="total_number"
              ></el-pagination>
            </div>
          </div>
        </div>
        <div class="resource-rank fr">
          <div
            class="upload-btn-div"
            @click="uploadResource"
          >
            <i class="el-icon-upload2"></i>
            <i>上传资源</i>
          </div>
          <div class="upload-rank">
            <el-card
              class="box-card"
              shadow="never"
            >
              <div
                slot="header"
                class="clearfix"
              ><span class="humantitle">下载排行</span></div>
              <div
                v-for="(item, index) in downloadData"
                :key="index"
                class="text item humanItem"
              >
                <i :class="[index + 1 < 4 ? 'humanNun yellowC' : 'humanNun']">{{ index + 1 }}</i>
                <router-link
                  :to="{ path: 'resourceDetail', query: { id: item.id } }"
                  :title="item.name"
                >{{ item.name }}</router-link>
              </div>
              <div
                class="no-data"
                v-if="downloadData.length == 0"
              >- 暂无数据 -</div>
            </el-card>
          </div>
          <div class="favs-rank">
            <el-card
              class="box-card"
              shadow="never"
            >
              <div
                slot="header"
                class="clearfix"
              ><span class="humantitle">收藏排行</span></div>
              <div
                v-for="(item, index) in favsData"
                :key="index"
                class="text item humanItem"
              >
                <i :class="[index + 1 < 4 ? 'humanNun yellowC' : 'humanNun']">{{ index + 1 }}</i>
                <router-link
                  :to="{ path: 'resourceDetail', query: { id: item.id } }"
                  :title="item.name"
                >{{ item.name }}</router-link>
              </div>
              <div
                class="no-data"
                v-if="favsData.length == 0"
              >- 暂无数据 -</div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      class="resourceDialog"
      title="上传资源"
      width="800px"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="resourceForm"
        ref="resourceForm"
        :inline="true"
        label-width="90px"
        label-position="left"
      >
        <el-form-item
          label="上传资源"
          required
          class="long-item upload-btn-item"
        >
          <template>
            <uploader
              class="uploader-example"
              ref="uploader"
              :options="uploadOptions"
              :file-status-text="statusText"
              @file-added="fileAdded"
              @file-progress="fileProgress"
              @file-success="fileSuccess"
              @file-error="fileFail"
            >
              <uploader-unsupport></uploader-unsupport>
              <uploader-drop>
                <uploader-btn :single="true">选择资源</uploader-btn>
                <span class="tip-word">（支持常用文档，图片，音频，压缩文件等格式）</span>
              </uploader-drop>
              <div
                class="progress-tips"
                v-if="fileAdd != null"
              >
                <span
                  class="file-name"
                  :title="fileAdd.name"
                >{{ fileAdd.name }}</span>
                <span
                  class="file-type"
                  :title="fileAdd.fileType"
                >{{ fileAdd.fileType }}</span>
                <span
                  class="progress-value"
                  v-if="percentage < 100"
                >{{ percentage }}%</span>
                <span
                  class="progress-value"
                  v-else
                ><i class="el-icon-success"></i></span>
                <span
                  class="cancel-upload"
                  @click="cancelUpload"
                  title="移除文件"
                >
                  <i class="el-icon-circle-close"></i>
                </span>
              </div>
            </uploader>
          </template>
        </el-form-item>
        <el-form-item
          label="资源名称"
          required
          class="long-item resource-name-item"
        >
          <el-input
            v-model.trim="resourceForm.name"
            maxlength="20"
            placeholder="20个字符内"
          ></el-input>
        </el-form-item>
        <!-- 单级 -->
        <template v-if="!isMulti">
          <el-form-item
            label="学段"
            required
          >
            <el-select
              v-model="resourceForm.study_section_id"
              @change="getGrade"
              placeholder="请选择学段"
            >
              <el-option
                v-for="(item, index) in sectionData"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="年级"
            required
            class="grade-item"
          >
            <el-select
              v-model="resourceForm.grade_id"
              @change="getSubject"
              placeholder="请选择年级"
            >
              <el-option
                v-for="(item, index) in gradeData"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="科目"
            class="subject-item"
          >
            <el-select
              v-model="resourceForm.subject_id"
              @change="getVersion"
              placeholder="请选择科目"
            >
              <el-option
                v-for="(item, index) in subjectData"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版本">
            <el-select
              v-model="resourceForm.version_id"
              @change="getMaterial"
              placeholder="请选择版本"
            >
              <el-option
                v-for="(item, index) in versionData"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="教材"
            class="material-item"
          >
            <el-select
              v-model="resourceForm.material_id"
              @change="getCateList1"
              placeholder="请选择教材"
            >
              <el-option
                v-for="(item, index) in materialData"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="章"
            class="cate-item"
          >
            <el-select
              v-model="resourceForm.list_1_id"
              @change="getCateList2"
              placeholder="请选择章"
            >
              <el-option
                v-for="(item, index) in cate1Data"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="节"
            class="long-item"
          >
            <el-select
              v-model="resourceForm.list_2_id"
              placeholder="请选择节"
            >
              <el-option
                v-for="(item, index) in cate2Data"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
        <!-- 多级 -->
        <template v-else>
          <el-form-item
            label="类别"
            required
            class="long-item"
          >
            <el-select
              v-model="resourceForm.cate_id"
              clearable
              @clear="resourceForm.cate_id=null"
              placeholder="请选类别"
            >
              <el-option
                v-for="(item, index) in classifyData"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <el-form-item
          label="权限"
          class="long-item"
        >
          <el-radio-group v-model="resourceForm.authority">
            <el-radio :label="1">公开</el-radio>
            <el-radio :label="0">不公开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="允许下载"
          required
          class="long-item"
        >
          <el-radio-group v-model="resourceForm.is_download">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="btns-item">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            v-loading.fullscreen="submitLoading"
            element-loading-text="正在保存中，请勿刷新浏览器"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            @click="submit"
          >
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import singleCascader from "@/components/common/single-cascader";
import multiCascader from "@/components/common/multi-cascader";
import resourceRow from "../base/resource-row";

export default {
  components: {
    singleCascader,
    multiCascader,
    resourceRow,
  },
  data() {
    return {
      hostURL: "",
      // 分页：
      page_index: 1,
      page_size: 12,
      total_number: 0,

      // 单级：
      // 顶部  学科、年级、科目筛选：
      study_section_id: 0,
      grade_id: 0,
      subject_id: 0,
      keyword: "", //首页搜索跳转到此页面时带的关键字
      create_id: 0,
      // 多级：
      platform_id: 0,
      school_code: null,
      cate_id: null,
      //资源列表：
      orderby: "create_time",
      resourceListData: [],
      // 下载排行：
      downloadData: [],
      // 收藏排行：
      favsData: [],
      // 上传资源弹窗：
      dialogVisible: false,
      resourceForm: {
        resName: "",
        name: "",
        study_section_id: null, //学科
        grade_id: null, //年级
        subject_id: null, //科目
        version_id: null, //版本
        material_id: null,
        list_1_id: null,
        list_2_id: null,
        authority: 1,
        is_download: 1,
        //文件
        path: "",
        filesize: 0,
        postfix: "",
      },
      // 默认表单值，用于清空数据
      defaultForm: {
        resName: "",
        name: "",
        study_section_id: null, //学科
        grade_id: null, //年级
        subject_id: null, //科目
        version_id: null, //版本
        material_id: null,
        list_1_id: null,
        list_2_id: null,
        authority: 1,
        is_download: 1,
        //文件
        path: "",
        filesize: 0,
        postfix: "",
        cate_id: null, //多级-类别id
      },
      classifyData: [], //多级-类别
      sectionData: [], //学科数组
      gradeData: [], //年级数组
      subjectData: [], //科目数组
      versionData: [], //版本数组
      materialData: [], //教材数组
      cate1Data: [], //章数组
      cate2Data: [], //节数组
      //上传插件配置
      fileAdd: null, //添加的资源文件
      percentage: 0, //文件上传的实时进度
      uploadOptions: {
        target: this.BASE_URL + "/api/resource/res_upload",
        testChunks: false,
        headers: { Authorization: `Bearer ` + this.$g.access_token },
        singleFile: true, //单文件上传，覆盖式。已选择一个文件，无论它是上传完还是正在上传中，若此时点击上传按钮选择一个文件上传，那新选择的文件会终止前面的文件，替换掉前面的文件
        allowDuplicateUploads: true, //允许一个已上传过的文件能再次被选中并上传
      },
      statusText: {
        success: "上传成功",
        error: "上传出错",
        uploading: "正在上传...",
        paused: "暂停",
        waiting: "等待上传",
      },
      //正在保存...的提示
      submitLoading: false,
    };
  },
  created() {
    let query = this.$route.query;

    this.keyword = query.keyword ? query.keyword : "";

    this.hostURL = sessionStorage.getItem("host_addr");
    // this.getResource();
    this.getDownLoadData();
    this.getFavsData();
  },
  mounted() {},
  computed: {
    isMulti() {
      return this.$store.getters.isMulti;
    },
  },
  watch: {
    // 切换搜索条件 ：时间、下载、收藏，展示资源列表
    orderby(a, b) {
      if (a != b) {
        this.getResource();
      }
    },
    "$route.query.keyword"(nv) {
      this.keyword = nv;
      this.getResource();
    },
  },
  methods: {
    // 资源卡片列表
    getResource() {
      this.resourceListData = [];
      let success = (res) => {
        const data = res.data.rows ? res.data.rows : [];
        const pleaceholder = new Array(12 - data.length);
        this.resourceListData = [...data, ...pleaceholder];

        this.total_number = res.data.total;
      };
      this.$ajax({
        url: "api/resource/resource",
        method: "get",
        params: {
          orderby: this.orderby,
          page: this.page_index,
          size: this.page_size,
          data_type: 1,
          study_section_id: this.study_section_id,
          grade_id: this.grade_id,
          subject_id: this.subject_id,
          version_id: 0,
          authonity: 1,
          not_in_file_type: 2,
          status: 1,
          res_use: this.keyword,
          // 多级
          school_code: this.school_code,
          cate_id: this.cate_id,
        },
        func: {
          success: success,
        },
      });
    },
    resChosed(obj) {
      this.grade_id = obj.grade_id;
      this.subject_id = obj.subject_id;
      this.study_section_id = obj.study_section_id;
      this.platform_id = obj.platform_id;
      this.school_code = obj.school_code;
      this.cate_id = obj.classify_id;
      this.page_index = 1;
      this.getResource();
    },
    // 分页
    change_page(val) {
      this.page_index = val;
      this.getResource();
    },
    // 下载排行
    getDownLoadData() {
      let success = (res) => {
        if (res.data.length != 0) {
          this.downloadData = res.data;
        }
      };
      let params = {
        orderby: "downloads",
        page: 1,
        size: 10,
        authonity: 1,
        not_in_file_type: 2,
        status: 1,
        is_download: 1,
      };
      this.$ajax.get("api/resource/resource", {
        params,
        func: { success: success },
      });
    },
    // 收藏排行
    getFavsData() {
      let success = (res) => {
        if (res.data.length != 0) {
          this.favsData = res.data;
        }
      };
      let params = {
        orderby: "favs",
        page: 1,
        size: 10,
        authonity: 1,
        not_in_file_type: 2,
        status: 1,
      };
      this.$ajax.get("api/resource/resource", {
        params,
        func: { success: success },
      });
    },
    //上传资源按钮：
    uploadResource() {
      if (this.$g.user_id == 0) {
        this.$message.warning("请先登录");
        return;
      }
      this.fileAdd = null;
      this.percentage = 0;
      this.resourceForm = deep_clone(this.defaultForm); //清空表单数据
      this.dialogVisible = true; //弹窗显示
      this.getSection(); //获取学段
      // this.getVersion(); //获取版本
      if (this.isMulti) {
        this.getResourceClassify();
      }
    },
    // 多级-获取资源分类
    getResourceClassify() {
      this.classifyData = [];
      let success = (res) => {
        this.classifyData = res.data;
        this.classifyData.unshift({ id: 0, name: "全部" });
      };
      this.$ajax({
        url: "api/resource/resource_cate",
        method: "get",
        params: {
          keyword: "",
        },
        func: { success: success },
      });
    },
    // 上传资源弹窗选中前面的选项，排在后面的选项要重置
    resetBehindData(level) {
      if (level > 5) {
        this.resourceForm.grade_id = null;
        this.gradeData = [];
      }
      if (level > 4) {
        this.resourceForm.subject_id = null;
        this.subjectData = [];
      }
      if (level > 3) {
        this.resourceForm.version_id = null;
        this.versionData = [];
      }
      if (level > 2) {
        this.resourceForm.material_id = null;
        this.materialData = [];
      }
      if (level > 1) {
        this.resourceForm.list_1_id = null;
        this.cate1Data = [];
      }
      if (level > 0) {
        this.resourceForm.list_2_id = null;
        this.cate2Data = [];
      }
    },
    //获取学段数据
    getSection() {
      let success = (res) => {
        this.sectionData = res.data;
      };
      this.$ajax({
        url: "api/org/org",
        method: "get",
        params: {
          level: 2,
          pid: 1,
          direction: "balance",
        },
        func: {
          success: success,
        },
      });
    },
    //获取年级数据
    getGrade() {
      this.resetBehindData(6);
      let success = (res) => {
        this.gradeData = res.data;
      };
      this.$ajax({
        url: "api/org/org",
        method: "get",
        params: {
          pid: this.resourceForm.study_section_id,
          level: 3,
          direction: "balance",
        },
        func: {
          success: success,
        },
      });
    },
    //获取科目数据
    getSubject() {
      this.resetBehindData(5);
      let success = (res) => {
        this.subjectData = res.data;
      };
      this.$ajax({
        url: "api/cate/subject",
        method: "get",
        params: {
          org_id: this.resourceForm.grade_id,
          type: 2,
          status: 1,
        },
        func: {
          success: success,
        },
      });
    },
    //获取版本数据
    getVersion() {
      this.resetBehindData(4);
      let success = (res) => {
        this.versionData = res.data;
      };
      this.$ajax({
        url: "api/cate/version",
        method: "get",
        params: {
          org_id: this.resourceForm.grade_id,
          sub_id: this.resourceForm.subject_id,
          type: 2,
          status: 1,
        },
        func: {
          success: success,
        },
      });
    },
    //获取教材数据
    getMaterial() {
      this.resetBehindData(3);
      let success = (res) => {
        this.materialData = res.data;
      };
      this.$ajax({
        url: "api/cate/material",
        method: "get",
        params: {
          org_id: this.resourceForm.grade_id,
          sub_id: this.resourceForm.subject_id,
          ver_id: this.resourceForm.version_id,
          status: 1,
        },
        func: {
          success: success,
        },
      });
    },
    //获取章数据
    getCateList1() {
      this.resetBehindData(2);
      let success = (res) => {
        this.cate1Data = res.data;
      };
      this.$ajax({
        url: "api/cate/cate_list",
        method: "get",
        params: {
          material_id: this.resourceForm.material_id,
          level: 1,
          pid: 0,
        },
        func: {
          success: success,
        },
      });
    },
    //获取节数据
    getCateList2() {
      this.resetBehindData(1);
      let success = (res) => {
        this.cate2Data = res.data;
      };
      this.$ajax({
        url: "api/cate/cate_list",
        method: "get",
        params: {
          material_id: this.resourceForm.material_id,
          level: 2,
          pid: this.resourceForm.list_1_id,
        },
        func: {
          success: success,
        },
      });
    },
    fileAdded(file) {
      if (file.size > 2000 * 1024 * 1024) {
        this.$message.error("附件大小不能超过2G");
        file.ignored = true;
        return false;
      }
      this.fileAdd = file;
    },
    cancelUpload() {
      this.fileAdd = null;
      this.$refs.uploader.uploader.cancel();
    },
    fileProgress() {
      this.percentage =
        parseInt(this.$refs.uploader.uploader.progress() * 100) <= 99
          ? parseInt(this.$refs.uploader.uploader.progress() * 100)
          : 99;
    },
    //上传成功的事件
    fileSuccess(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      mess = handleResponseData(mess);
      this.resourceForm.resName = mess.data.file_name;
      this.resourceForm.path = mess.data.file_path;
      this.resourceForm.filesize = mess.data.file_size;
      this.resourceForm.postfix = mess.data.post_fix;
      this.percentage = 100;
    },
    // 上传失败
    fileFail(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
        let callbcak = (data) => {
          this.uploadRetryTimes--;
          this.$refs.uploader.uploader.retry(file);
        };
        this.get_access_token(callbcak);
      } else {
        this.$message.error(mess.msg);
      }
    },
    // 保存按钮
    submit() {
      if (this.fileAdd == null) {
        this.$message.warning("请上传资源文件~");
        return;
      }
      if (this.percentage < 100) {
        this.$message.warning("传资源文件正在上传中，请稍等...");
        return;
      }
      if (this.resourceForm.name == "") {
        this.$message.warning("请填写资源名字~");
        return;
      }
      // 单级
      if (
        !this.isMulti &&
        [null, 0].includes(this.resourceForm.study_section_id)
      ) {
        this.$message.warning("请选择学段~");
        return;
      }
      if (!this.isMulti && [null, 0].includes(this.resourceForm.grade_id)) {
        this.$message.warning("请选择年级~");
        return;
      }
      // 多级
      if (this.isMulti && [null].includes(this.resourceForm.cate_id)) {
        this.$message.warning("请选择类别~");
        return;
      }

      this.submitLoading = true;
      let success = (res) => {
        this.submitLoading = false;
        this.dialogVisible = false;
        let role = this.$store.getters.userInfo.rolebaseid;
        // 不公开的，提示上传成功
        if (this.resourceForm.authority === 0) {
          this.$message.success("上传成功~");
        } else {
          // 公开的判断：1\2\3都属于管理员；6是教师，8是教研人员，这类身份提交的资源都不需要审核
          let flag =
            role.indexOf(1) > -1 ||
            role.indexOf(2) > -1 ||
            role.indexOf(3) > -1 ||
            role.indexOf(6) > -1 ||
            role.indexOf(8) > -1;
          if (flag) {
            this.$message.success("上传成功~");
          } else {
            this.$message.success("请等待管理员审核~");
          }
        }
        this.getResource();
      };
      let fail = (res) => {
        this.submitLoading = false;
        this.dialogVisible = false;
        this.$message.error("上传资源失败");
      };
      this.$ajax({
        url: "api/resource/vue_resource",
        method: "post",
        data: this.resourceForm,
        func: {
          success: success,
          fail: fail,
        },
      });
    },
  },
};
</script>
<style lang="scss">
$bg_3: #ffffff; //white - bg
$shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
$shadow2: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
$sc_6: #348efc; //Main color
$font: 16px Helvetica Neue, Helvetica, PingFang SC, \5fae\8f6f\96c5\9ed1, Tahoma,
  Arial, sans-serif;

.i_transition {
  -moz-transition: all 0.35s ease-in;
  -webkit-transition: all 0.35s ease-in;
  -o-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in;
}

.resource-index {
  padding-bottom: 50px;
}

.el-dialog {
  .el-dialog__header {
    background-color: #338efc;
    padding: 8px 20px 8px;
  }

  .el-dialog__body {
    padding: 30px 40px 10px;
  }

  .el-dialog__title {
    color: #fff;
    font-size: 14px;
  }

  .el-dialog__headerbtn {
    top: 8px;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 24px;
  }

  .el-dialog__headerbtn .el-dialog__close:hover {
    color: rgba(255, 255, 255, 0.8);
  }
}

.filter-nav {
  padding-bottom: 20px;

  .el-radio__input {
    display: none;
  }
}

.resources-container {
  .resource-card-box {
    display: inline-block;
    width: 896px;
    height: 807px;
    .cards-box-ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }
  }

  .dependent {
    height: 760px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    i {
      margin: 150px 0 30px;
    }

    p {
      color: #666;
    }
  }

  .pageBox {
    margin-top: 24px;
  }

  .resource-rank {
    display: inline-block;
    padding: 10px 15px;
    height: 740px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    .upload-btn-div {
      box-sizing: border-box;
      display: inline-block;
      width: 250px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #348efc;
      font-size: 14px;
      border: 1px solid #008eff;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        color: #348efc;
        background-color: #ecf5ff;
        border: 1px solid #348efc;
      }
      .el-icon-upload2 {
        margin-right: 5px;
        font-size: 18px;
      }

      i {
        vertical-align: middle;
      }
    }
    .box-card {
      border: none;

      .humantitle {
        padding: 5px 0;
        border-radius: 2px;
        color: #666;
      }

      .el-card__header {
        padding: 18px 0 10px;
        border: none;
      }

      .el-card__body {
        height: 296px;
        padding: 0 0 14px;
      }

      .humanItem {
        display: flex;
        align-items: center;
        padding: 5px 0;
        font-size: 14px;
      }

      .humanItem i {
        border-radius: 4px;
      }

      .humanItem a {
        display: inline-block;
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .humanItem:hover {
        background-color: #effaff;
      }

      .humanItem:hover > a {
        color: #348efc;
      }

      .humanNun {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #ffffff;
        background: #d2d2d2;
        margin-right: 10px;
      }

      .humanNun.yellowC {
        background: #f2b732;
      }
    }

    .upload-rank .el-card {
      border-bottom: 1px dashed #d7d7d7;
    }
  }

  .no-data {
    color: #ccc;
    text-align: center;
    padding: 70px 0;
  }
}

.resourceDialog {
  .long-item {
    width: 100%;
  }

  .upload-btn-item {
    .el-button {
      padding: 0;
      width: 100px;
      height: 34px;
    }

    .tip-word {
      color: #606266;
    }

    .progress-tips {
      .file-name {
        color: #409eff;
      }

      .file-type {
        margin: 0 50px;
      }
      .file-name,
      .file-type {
        display: inline-block;
        max-width: 250px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .progress-value {
        color: #13ce66;
        i {
          font-size: 16px;
        }
      }
      .file-name,
      .file-type,
      .progress-value {
        vertical-align: middle;
      }
    }
    .cancel-upload {
      margin-left: 30px;
      cursor: pointer;
      i {
        padding: 5px;
        font-size: 16px;
        color: red;
      }
    }
  }

  .resource-name-item {
    .el-form-item__content {
      width: 86%;
    }

    .el-input__inner {
      height: 36px;
    }
  }

  .el-select .el-input__inner {
    width: 140px;
    height: 34px;
    line-height: 34px;
  }

  .grade-item,
  .subject-item,
  .material-item,
  .cate-item {
    .el-form-item__label {
      text-align: end;
    }
  }

  .btns-item {
    width: 100%;
    text-align: center;

    .el-button {
      padding: 0;
      width: 100px;
      height: 34px;
    }
  }

  .uploader-example {
    display: inline-block;

    // width: 120px;
    .uploader-drop {
      padding: 0px;
      border: none;
      background-color: transparent;
    }

    .uploader-btn {
      border-radius: 4px;
      padding: 7px 16px;
      margin-right: 15px;
      color: #fff;
      background-color: #409eff;
      border: 1px solid transparent;
    }

    .uploader-btn:hover {
      background: rgba(51, 142, 252, 0.8);
    }
  }
}
</style>
